<template>
	<el-main style="padding: 0px; background-color: #ffffff; height: 100%">
		<div class="info-box">
			<div class="info-title"><span>活动详情</span></div>
		</div>
		<div class="info-content">
			<labelName :title="'基础信息:'"></labelName>
			<div class="content-basic">
				<span class="content-basic-label">活动编码:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">活动状态:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">活动时间:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
			</div>
			<div class="content-basic">
				<span class="content-basic-label">申请人:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">申请片区:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">申请时间:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
			</div>
			<div class="content-basic">
				<span class="content-basic-label">所属场景:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">审核人:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">审核时间:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
			</div>
			<div class="content-basic">
				<span class="content-basic-label">活动主题:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">活动类型:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">工具包:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
			</div>
		</div>
		<div class="info-content">
			<labelName :title="'活动指标:'"></labelName>
			<div class="content-basic">
				<span class="content-basic-label">参与客户数:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">品种数:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
				<span class="content-basic-label">累计销售额:</span>
				<el-input v-model="classData.activityNumber" style="margin: 5px 0px 5px 20px; width: 60%" disabled></el-input>
			</div>
		</div>
		<!-- <el-card shadow="never" class="list">
			<template #header>
				<div class="tatle">学员列表</div>
			</template>
			<el-row>
				<el-col v-for="(item, index) in studentList" :key="index" :span="6">
					<div class="avatar-style">
						<el-avatar shape="square" :src="item.headPortrait" :size="50"></el-avatar>
						<div class="right-member">
							<div class="member-line">姓名：{{ item.name }}</div>
							<div class="member-line">性别：{{ item.sex == 0 ? '男' : '女' }}</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-card>

		<el-card shadow="never" class="list">
			<template #header>
				<div class="tatle">课程列表</div>
			</template>
			<el-card v-for="schedule in courseChecked.classSchedules" :key="schedule.id" shadow="always" class="list">
				<el-row :gutter="20">
					<el-col :span="4">
						<div class="listContent2">课程名称：</div>
					</el-col>
					<el-col :span="12">
						<div class="listContent1">
							{{ schedule.title }}
						</div>
					</el-col>
					<el-col :span="4">
						<div class="listContent2">教室：</div>
					</el-col>
					<el-col :span="4">
						<div class="listContent1">
							{{ schedule.address }}
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="4">
						<div class="listContent2">上课时间：</div>
					</el-col>
					<el-col :span="12">
						<div class="listContent1">
							{{ formatClassDate(schedule) }}
						</div>
					</el-col>
					<el-col :span="4">
						<div class="listContent2">老师：</div>
					</el-col>
					<el-col :span="4">
						<div class="listContent1">
							{{ schedule.teacherName }}
						</div>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="4">
						<div class="listContent2">课程状态：</div>
					</el-col>
					<el-col :span="12">
						<div class="listContent1">
							<el-radio-group v-model="schedule.type" class="ml-4" @change="handleChange(schedule.type, schedule.id)">
								<el-radio :label="0" size="small">待上课</el-radio>
								<el-radio :label="1" size="small">授课中</el-radio>
								<el-radio :label="2" size="small">已上课</el-radio>
								<el-radio :label="3" size="small">未上课</el-radio>
							</el-radio-group>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</el-card> -->
	</el-main>
</template>

<script>
import labelName from './../../ActivityOverview/components/labelname.vue'

/* eslint-disable */
    export default {
		components:{
			labelName
		},
        data() {
            return {
                classData: {},
                courseChecked: '',
                reasonDialog: false,
                studentList: [],
                form: {
                    id: '',
                    type: '',
                    reason: ''
                },
                rule: {
                    reason: [
                        {required: true, message: '请输入修改原因'}
                    ]
                }
            }
        },
        created() {

        },
        methods: {
            //注入数据
            async setData(data) {
                this.classData = data
                // let param = {id: this.classData.id}
                // let dataChecked = await this.$API.teachingAffairs.class.info.post(param)
                // this.courseChecked = dataChecked.data
                // let studentList = await this.$API.teachingAffairs.class.classStudentList.post({classId: this.classData.id})
                // if (studentList && studentList.code == 0) {
                //     this.studentList = studentList.data;
                // }
            }
		}
    }
</script>

<style>
.info-box {
	border-bottom: 1px solid #E8E8E8;
}
.info-title {
	width: 845px;
	height: 32px;
	font-size: 22px;
	font-family: Source Han Sans SC-Bold, Source Han Sans SC;
	font-weight: bold;
	margin: 20px 0px 20px 15px;
	color: #333333;
}
.info-content {
	width: 845px;
	padding: 20px 20px 0px 20px;
}
.content-basic {
	display: flex;
}
.content-basic-label {
	margin: 10px 0px 10px 15px;
    width: 40%;
	font-size: 16px;
}
	.list {
		margin-top: 10px;
	}

	.listContent1 {
		padding-top: 10px;
		padding-bottom: 10px;
		font-weight: 400;
		font-size: 14px;
	}

	.listContent2 {
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: right;
		font-weight: 400;
		font-size: 14px;
	}

	.right-member {
		height: 50px;
		line-height: 50px;
		margin-left: 10px
	}

	.member-line {
		height: 25px;
		line-height: 25px
	}

	.avatar-style {
		display: inline-flex;
	}
</style>
